<template>
	<view v-if="show" class="sheet" :class="(active===true ? 'active ' : '') + (cancel===true ? 'cancel ' : '')">
		<view class="bg" :style="`transition-duration: ${time}s;`" @click="bgclose"></view>
		<view class="in" :style="`transition-duration: ${time}s;`">
			<view v-if="title!=''" class="title">
				<p>{{title}}</p>
			</view>
			<scroll-view class="box" :style="`height: ${height}; padding: ${padding}`" scroll-y="true">
				<slot />
				<view v-if="btnlist.length > 0" v-for="(item, index) in btnlist" @click="afterclose(item.method)" class="sheet_li">
					{{item.name}}
				</view>
			</scroll-view>
			<view v-if="title!=''" class="blank"></view>
			<view v-if="cancel" class="blank2"></view>
			<view v-if="cancel" class="cancel" @click="close">
				{{cancelStr}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				show: false,
				active: false,
			};
		},
		props: {
			time: {
				type: Number,
				default: 0.3,
			},
			maskClose: {  //是否可点击遮罩关闭
				type: Boolean,
				default: true,
			},
			height: {  //高度
				type: String,
				default: '150px'
			},
			cancel: {  //是否显示取消按钮
				type: Boolean,
				default: false
			},
			cancelStr: {  //取消按钮文字
				type: String,
				default: '取消'
			},
			padding: {  //内边距
				type: String,
				default: '0px',
			},
			title: {  //标题
				type: String,
				default: '',
			},
			btnlist: {  //选项列表
				type: Array,
				default: ()=>[],
			},
		},
		methods: {
			open() {
				this.flag = true;  //动画中
				this.show = true;
				setTimeout(()=>{
					this.active = true;
				}, 1);
				setTimeout(()=>{
					this.flag = false;
				}, ((this.time * 1000) + 10));
			},
			bgclose() {
				if(this.maskClose===true){
					this.close();
				}
			},
			afterclose(fun) {
				if(typeof(fun)=='function'){
					fun();
				}
				this.close();
			},
			close() {
				if(this.flag===true){
					return false;  //防误触
				}
				this.active = false;
				setTimeout(()=>{
					this.show = false;
					this.flag = false;
				}, ((this.time * 1000) + 10));
			},
		}
	}
</script>

<style lang="scss">
$color-font: #3b3b3b;
$color-border: #e5e5e5;
.animate {
	transition-property: all;
	transition-timing-function: ease-out;
}
.sheet {
	width: 100%;
	height: 100%;	
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	
	.bg {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		@extend .animate;
	}
	.in {
		width: 100%;
		min-height: 50px;
		background-color: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		transform: translateY(80%);
		@extend .animate;
		
		.title {
			margin-top: 5px;
			text-align: center;
			height: 45px;
			line-height: 45px;
			color: $color-font;
			width: 100%;
			position: relative;
			
			p {
				display: inline-block;
				background-color: #fff;
				padding: 0 10px;
				position: relative;
				z-index: 2;
			}
			&::after {
				content: "";
				display: block;
				width: calc(100% - 40px);
				height: 1px;
				background-color: $color-border;
				position: absolute;
				top: 22px;
				left: 20px;
				z-index: 1;
			}
		}
		.box {
			box-sizing: border-box;
		}
		.blank {
			width: 100%;
			height: 12px;
		}
		.blank2 {
			width: 100%;
			height: 6px;
			background-color: #f7f7f7;
			border-top: 1px solid $color-border;
		}
	}	
	.cancel {
		text-align: center;
		font-size: 15px;
		width: 100%;
		height: 46px;
		line-height: 46px;
		position: absolute;
		bottom: 0;
		left: 0;
		color: $color-font;
		
		&::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: $color-border;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
.sheet.active {
	.bg {
		background-color: rgba(0, 0, 0, 0.6);
	}
	.in {
		transform: translateY(0);
	}
}
.sheet.cancel {
	.in {padding-bottom: 46px;}
}
.sheet_li {
	padding: 14px 0;
	color: $color-font;
	font-size: 15px;
	border-bottom: 1px solid $color-border;
}
.sheet_li:last-child {
	border-bottom: 0;
}
</style>